Introducción a HTML, CSS y SVG

IIC2026

SVG

Introducción a HTML, CSS y SVG

IIC2026

Scalable Vector Graphics

Scalable Vector Graphics


  • Formato de imágenes bidimensionales vectorial.
  • Define su contenido a partir de objetos con propiedades.
  • Muy compatible con HTML.

Estructura




  ...

					


  ...
(0, 0) (500, 0) (0, 500) (500, 500)
(0, 0) (500, 0) (0, 500) (500, 500)
(0, 0) (500, 0) (0, 500) (500, 500)
(0, 0) (500, 0) (0, 500) (500, 500)
(0, 0) (500, 0) (0, 500) (500, 500) 


  
  
  ¡Hola!
¡Hola! (0, 0) (500, 0) (0, 500) (500, 500)
(0, 0) (100, 0) (0, 100) (100, 100)

SVG en HTML



    <!DOCTYPE html>
    <html> 
      <head>
        <meta charset="utf-8">
        <title>Ejemplo con SVG</title>
      </head>
      <body>

        <svg width="500" height="500">
          <rect x="200" y="100" width="300" height="100" fill="red"></rect>
          <circle cx="100" cy="100" r="50" fill="blue"></circle>
          <text x="100" y="300">¡Hola!</text>
        </svg>
    
      </body>
    </html>

SVG en HTML



            
            
              
            
          

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ejemplo con SVG</title>
  </head>
  <body>

    <img src="corazon.svg"></img>
    
  </body>
</html>

SVG

Introducción a HTML, CSS y SVG

IIC2026


¡Deja tus preguntas en los comentarios!